<template>
    <view class="page">
        <view class="top">
            <u-tabs :list="list1" @click="handlechange" :activeStyle="{
                color: '#F59A23',
            }" :inactiveStyle="{
                color: '#000000',
            }" lineColor="#F59A23" keyName="title"></u-tabs>
            <view class="top-flex flex" v-if="active == 1">
                <view class="top-item" :class="{ 'active': query.type == 6 }" @click="handleActive(6)">方案-下载</view>
                <view class="top-item" :class="{ 'active': query.type == 1 }" @click="handleActive(1)">方案-阅读</view>
                <view class="top-item" :class="{ 'active': query.type == 2 }" @click="handleActive(2)">专辑</view>
            </view>
        </view>
        <view class="kong" style="height: 220rpx;"></view>
        <view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
            <image :src="showImgApi + item.img" mode="scaleToFill" class="img" />
            <view class="item-bottom">
                <view class="title"> {{ item.title }}</view>
                <view class="flex-1">
                    <!-- <span>PK竞技</span><span>沉浸体验</span><span>助跑新人</span><span>领导力提升</span>  -->
                </view>
                <!-- <view class="flex-2" v-if="active == 1 || active == 2">
                    <image src="https://www.atuanjian.com/appletStatic/static/images/u-39.svg" mode="scaleToFill" />徐奋斗
                </view> -->
            </view>
            <!-- <view class="item-1" v-if="type == 1 || type == 2">
                <view class="type-3">已支付：<span>￥{{item.people_price}}</span></view>
            </view> -->
            <view class="item-1" v-if="active == 3" style="border: none;">
                <view class="type-2">
                    <!-- <span>vip 免费</span>  -->
                    ￥{{ item.people_price }}方案
                </view>
            </view>
        </view>
        <view class="tips" v-if="list.length == 0">
            <u-icon name="file-text" color="#000000" size="128"></u-icon>
            目前您还没有方案阅读
            <view class="btn" @click="handleLook">查看更多精彩方案</view>
        </view>
        <view class="kong" style="height: 220rpx;"></view>
    </view>
</template>
<script>
import {
    userTopNum, userScheme
} from "@/utils/request.js";
export default {
    data() {
        return {
            showImgApi: this.$config.showImgApi,
            list1: [
                { title: '我购买的(0)', type: 1, active: 1 }, { title: '我发布的(0)', type: 3 }, { title: '我收藏的(0)', type: 4 }, { title: '我下载的(0)', type: 6 }
            ],
            type: 6,
            active: 1,
            query: { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, page: 1, limit: 10, type: 6 },
            list: [],
            total: 0,
            obj: {}
        }
    },
    onLoad() {
        this.init_userTopNum()
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.query.page++
            this.init()
        }
    },
    methods: {
        async userTopNum(data) {
            return await userTopNum(data);
        },
        async userScheme(data) {
            return await userScheme(data);
        },
        init() {
            this.userScheme(this.query).then(res => {
                if (res) {
                    this.list = [...res.list, ...this.list]
                    if (this.type == 6) {
                        this.total = this.obj.download
                    } else if (this.type == 1) {
                        this.total = this.obj.buy_scheme
                    } else if (this.type == 2) {
                        this.total = this.obj.buy_album
                    } else if (this.type == 3) {
                        this.total = this.obj.newScheme
                    } else if (this.type == 4) {
                        this.total = this.obj.collect
                    } else {
                        this.total = this.obj.download
                    }
                }
            })
        },
        init_userTopNum() {
            const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id }
            this.userTopNum(data).then(res => {
                if (res) {
                    let num = res.collect_scheme + res.collect_album
                    this.list1[0].title = `我购买的(${res.buy})`
                    this.list1[1].title = `我发布的(${res.newScheme})`
                    this.list1[2].title = `我收藏的(${num})`
                    this.list1[3].title = `我下载的(${res.download})`
                    this.obj = res
                    this.init()
                }
            })
        },
        handleLook() {
            uni.navigateTo({ url: '/pagesB/scheme/index' })
        },
        handleActive(active) {
            this.query.type = active
            this.query.page = 1
            this.list = []
            this.init()
        },
        handlechange(e) {
            this.query.type = e.type
            this.query.page = 1
            this.active = e.active ? e.active : ''
            this.list = []
            this.init()
        },
        detail(item) {
            if (this.query.type == 2) {
                uni.navigateTo({
                    url: '/pagesB/scheme/album?id=' + item.id
                })
            } else {
                uni.navigateTo({
                    url: '/pagesB/scheme/detail?id=' + item.id
                })
            }
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .u-icon--right {
    flex-direction: column !important;
}

.tips {
    width: 460rpx;
    margin: 0 auto;
    text-align: center;
    font-size: 26rpx;
    color: #7F7F7F;

    .btn {
        width: 460rpx;
        height: 86rpx;
        line-height: 86rpx;
        text-align: center;
        border-radius: 86rpx;
        background: #FFBB50;
        color: #ffffff;
        margin-top: 24rpx;
    }
}

.item {
    width: 694rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: #ffffff;
    padding-bottom: 16rpx;
    margin: 0 auto 20rpx;

    .img {
        width: 100%;
        height: 370rpx;
    }

    .item-1 {
        width: 92%;
        margin: 0 auto;
        padding-top: 16rpx;
        border-top: 1rpx solid#AAAAAA;
        display: flex;
        justify-content: space-between;

        .item-eys {
            display: flex;
            align-items: center;
            color: #aaaaaa;
            font-size: 20rpx;
            margin-right: 4rpx;

            image {
                width: 23rpx;
                height: 23rpx;
            }
        }

        .type-2 {
            font-size: 25rpx;
            color: #7F7F7F;

            span {
                background-image: linear-gradient(to right, #f59a23, #f2f2f2);
                font-size: 20rpx;
                font-style: italic;
                margin-right: 20rpx;
                padding: 2rpx 10rpx;
                color: #333333;
            }
        }

        .type-3 {
            font-size: 26rpx;
            color: #7F7F7F;

            span {
                color: #D9001B;
            }
        }
    }

    .item-bottom {
        width: 92%;
        margin: 0 auto;

        .title {
            font-size: 30rpx;
            padding-top: 16rpx;
        }

        .flex-1 {
            margin-top: 10rpx;

            span {
                font-size: 20rpx;
                border-radius: 4rpx;
                background: #facd91;
                color: #b8741a;
                padding: 2rpx 4rpx;
                margin-right: 12rpx;
            }
        }

        .flex-2 {
            margin-top: 10rpx;
            display: flex;
            align-items: center;
            font-size: 20rpx;
            color: #7f7f7f;
            padding-bottom: 16rpx;

            image {
                width: 70rpx;
                height: 70rpx;
                margin-right: 10rpx;
            }
        }
    }
}

.top {
    width: 100%;
    height: 180rpx;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;

    .top-flex {
        width: 90%;
        justify-content: space-between;
        margin: 0 auto;

        .top-item {
            width: 160rpx;
            height: 60rpx;
            background: #F2F2F2;
            line-height: 60rpx;
            text-align: center;
            font-size: 24rpx;
            border-radius: 36rpx;
        }

        .active {
            background: #FFBB50;
            color: #ffffff;
        }
    }
}

::v-deep .u-tabs {
    width: 100%;
    margin: 0 auto;

    text {
        font-size: 25rpx !important;
    }
}
</style>